<template>
    <div class="hd-input" :class="{'before-line': beforeLine, 'after-line': afterLine, 'mini': type === 'mini', }">
        <div v-if="title" class="title">{{title}}</div>
        <div class="select-box">
            <div v-for="(option, index) in checkOptions"
                :key="index"
                class="item text-normal"
                @click="onClickOption(option)"
                :style="getStyle(option)">
                {{option.text}}
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { isArray } from '@/lib/utils';

@Component({
    name: 'ZbSelect',
})
export default class ZbSelect extends Vue {
    @Prop({ type: String, default: 'normal' }) public type: any;
    @Prop({ type: String }) public title: any;
    @Prop({ type: [String, Array], required: true }) public value: any;
    @Prop({ type: Array, required: true }) public options!: (string | ValueText)[];
    @Prop({ type: String, default: '#FFFFFF' }) public optionBg: any;
    @Prop({ type: String, default: '#FFFFFF' }) public selectedBg: any;
    @Prop({ type: Boolean, default: false }) public hasBr: any;
    @Prop({ type: String, default: '#6A6A6A' }) public defaultBr: any;
    @Prop({ type: String, default: '#044A8D' }) public selectedBr: any;
    @Prop({ type: String, default: '#6A6A6A' }) public defaultColor: any;
    @Prop({ type: String, default: '#B1B1B1' }) public selectedColor: any;
    @Prop({ type: Boolean, default: false }) public beforeLine: any;
    @Prop({ type: Boolean, default: false }) public afterLine: any;

    public currentValue: any = null;

    public get checkOptions() {
        return this.options.map((item: any) => {
            return typeof item === 'string'
                ? { text: item, value: item }
                : item;
        });
    }

    @Watch('currentValue')
    public onCurrentValueChange(val: any) {
        this.$emit('input', val);
    }

    public getStyle(option: ValueText) {
        const checked = isArray(this.value) ? this.value.indexOf(option.value) >= 0 : this.value === option.value;
        return { 'background': checked ? this.selectedBg : this.optionBg,
            'border': this.hasBr ? (checked ? '2rpx solid' + this.selectedBr : '2rpx solid' + this.defaultBr) : '2rpx solid transparent',
            'color': checked ? this.selectedColor : this.defaultColor
        };
    }
    public onClickOption(option: ValueText) {
        if (Array.isArray(this.value)) {
            const index = this.value.indexOf(option.value);
            this.currentValue = this.value;
            if (index === -1) {
                this.currentValue.push(option.value);
            } else {
                this.currentValue.splice(index, 1);
            }
            // console.log(this.currentValue);
        } else {
            this.currentValue = option.value;
        }
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

.hd-input {
    position: relative;
    // padding: 36rpx 0;
    .title {
        .text-huge();
        margin-bottom: 26rpx;
    }
    .select-box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .item {
            box-sizing: border-box;
            padding: 10rpx 24rpx;
            margin-top: 14rpx;
            margin-bottom: 14rpx;
            margin-right: 16rpx;
            border-radius: 10rpx;
        }
    }
    &.mini {
        .text-tiny();
        .select-box {
            .item {
                padding: 0rpx 8rpx;
                margin-top: 8rpx;
                margin-bottom: 8rpx;
                margin-right: 8rpx;
                border-radius: 10rpx;
            }
        }
    }
}

</style>
